<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>Document</title>
		<style type="text/css">
			#register {
				width: 600px;
				margin: 0px auto;
			}

			.container {
				margin-bottom: 25px;
			}

			a {
				text-decoration: none;
				color: blue;
			}

			.input {
				display: inline-block;
				border: 2px #ccc solid;
				width: 390px;
				height: 100%;
				line-height: 40px;
				border-radius: 5px;
				padding-left: 10px;
			}

			.input label {
				display: inline-block;
				width: 130px;
				height: 100%;
				text-align: center;
				line-height: 40px;
			}

			.input input {
				border: none;
				width: 160px;
				height: 38px;
			}

			.input input:focus {
				outline: none;
			}

			#district {
				border: none;
				height: 40px;
				font-size: 16px;
			}

			#district:focus {
				outline: none;
			}

			#district option {
				height: 40px;
				text-align: center;
			}

			#submit {
				width: 100%;
				background-color: red;
				color: white;
			}

			.submit {
				border: none;
			}

			.root {
				margin-bottom: 25px;
			}

			#securityCodeText {
				display: inline-block;
				width: 86px;
				height: 100%;
				background-color: black;
				color: white;
				text-align: center;
			}

			.notice {
				margin-left: 10px;
				width: 340px;
				height: inherit;
				font-weight: bold;
			}

			.notice-right {
				color: green;
			}

			.notice-wrong {
				color: red;
			}

			.rg_layout {
				width: 800px;
				height: 650px;
				border: 8px solid #EEEEEE;
				/*solid 定义实线*/
				background-color: white;
				margin: auto;
			}
			.rg_left {

				margin: 10px;
				align: center;
			}
			
			.rg_left>p:first-child {
				color: #000000;
				font-size: 20px;
				text-align: center;
			}
			
			.rg_left>p:last-child {
				color: #A6A6A6;
				font-size: 20px;
				text-align: center;
			}
		</style>
		<script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script>
		<script type="text/javascript">
			$(() => {
				// 用户名校验
				//219970529唐若兰
				$("#username").focus(function() {
					$(".notice:eq(0)").text("");
				})
				$("#username").blur(function() {
					if ($(this).val() == "") {
						$(".notice:eq(0)").addClass('notice-wrong').text("用户名或登录名不能为空");
					}
				});

				// 密码校验
				$("#password").focus(function() {
					$(".notice:eq(1)").text("");
				})
				$("#password").blur(function() {
					$(".notice:eq(1)").removeClass('notice-wrong').removeClass('notice-right');
					let reg = /^[\w]{8,20}$/;
					let reg1 = /(?!^[a-zA-Z]+$)(?!^[0-9]+$)(?!^[_]+$)^\S{8,20}$/;
					if ($(this).val() == "") {
						$(".notice:eq(1)").addClass('notice-wrong').text("密码不能为空");
					} else if (!reg.test($(this).val())) {
						$(".notice:eq(1)").addClass('notice-wrong').text("密码长度必须在8~20位之间");
					} else if (!reg1.test($(this).val())) {
						$(".notice:eq(1)").addClass('notice-wrong').text("密码至少由数字、字母或下划线其中两种组成");
					} else {
						$(".notice:eq(1)").addClass('notice-right').text("密码正确");
					}
				});
				$("#password").bind('input propertychange', function() {
					let reg = /^[\w]*$/;
					if (!reg.test($(this).val())) {
						$(this).val("");
						$(".notice:eq(1)").addClass('notice-wrong').text("密码只能是数字、字母和_其中一种");
					}
				});

				// 确认密码校验
				$("#ensurepsd").focus(function() {
					$(".notice:eq(2)").text("");
				})
				$("#ensurepsd").blur(function() {
					$(".notice:eq(2)").removeClass('notice-wrong').removeClass('notice-right');
					let reg = /^[\w]{8,20}$/;
					if ($(this).val() == "") {
						$(".notice:eq(2)").addClass('notice-wrong').text("密码不能为空");
					} else if (!reg.test($(this).val())) {
						$(".notice:eq(2)").addClass('notice-wrong').text("密码长度必须在8~20位之间");
					} else if ($("#password").val() !== $("#ensurepsd").val()) {
						$(".notice:eq(2)").addClass('notice-wrong').text("两次输入密码不一致");
					} else {
						$(".notice:eq(2)").addClass('notice-right').text("密码正确");
					}
				});
				$("#ensurepsd").bind('input propertychange', function() {
					let reg = /^[\w]*$/;
					if (!reg.test($(this).val())) {
						$(this).val("");
						$(".notice:eq(2)").addClass('notice-wrong').text("密码只能是数字、字母和_其中一种");
					}
				});

				// 手机号校验
				$("#phone").focus(function() {
					$(".notice:eq(3)").text("");
				})
				$("#phone").blur(function() {
					if ($(this).val() == "") {
						$(".notice:eq(3)").addClass('notice-wrong').text("手机号不能为空");
					}
					let exp = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
					if (($(this).val() !== '') && (!exp.test($(this).val()))) {
						$(".notice:eq(3)").addClass('notice-wrong').text("请输入正确的手机号");
					}
				});
				$("#phone").bind('input propertychange', function() {
					let reg = /^[0-9]*$/;
					if (!reg.test($(this).val())) {
						$(this).val("");
						$(".notice:eq(3)").addClass('notice-wrong').text("手机号码只能是数字");
					}
				});

				// 验证码
				let randomArr = ['A', 'a', 'B', 'b', '0', 'C', 'c', 'D', 'd', '1', 'E', 'e', 'F', 'f',
					'2', 'G', 'g', 'H', 'h', '3', 'I', 'i', 'J', 'j', '4', 'K', 'k', 'L',
					'l', '5', 'M', 'm', 'N', 'n', '6', 'O', 'o', 'P', 'p', '7', 'Q', 'q',
					'R', 'r', '8', 'S', 's', 'T', 't', '9', 'U', 'u', 'V', 'v', 'W', 'w',
					'X', 'x', 'Y', 'y', 'Z', 'z'
				];
				let num = 4,
					iniStr = '';
				for (let i = 0; i < num; i++) {
					iniStr += randomArr[Math.floor(Math.random() * 62)];
				}
				$("#securityCodeText").text(iniStr);
				$("#securityCodeText").click(function() {
					let str = '';
					for (let i = 0; i < num; i++) {
						str += randomArr[Math.floor(Math.random() * 62)];
					}
					$("#securityCodeText").text(str);
				});
				$("#securityCode").focus(function() {
					$(".notice:eq(4)").text("");
				})
				$("#securityCode").blur(function() {
					if (($("#securityCode").val() !== '') && ($(this).val().toUpperCase() !== $(
							"#securityCodeText").text().toUpperCase())) {
						$(".notice:eq(4)").addClass('notice-wrong').text("验证码错误");
					}
				});
			});
		</script>
	</head>
	<body>
		<div class="rg_layout">
			<div class="rg_left">
				<p>新用户注册</p>
				<p>USER REGISTER</p>
			</div>
			<form id="register" action="#" method="post">
				<div class="container">
					<div class="input">
						<label for="username">用户名</label>
						<input type="text" id="username" name="username" placeholder="您的用户名或登录名">
					</div>
					<span class="notice"></span>
				</div>
				<div class="container">
					<div class="input ">
						<label for="password">密码</label>
						<input type="password" id="password" name="password" placeholder="建议至少使用两种字符组合">
					</div>
					<span class="notice"></span>
				</div>
				<div class="container">
					<div class="input">
						<label for="ensurepsd">确认密码</label>
						<input type="password" id="ensurepsd" name="ensurepsd" placeholder="请再次输入密码">
					</div>
					<span class="notice"></span>
				</div>
				<div class="container">
					<div class="input">
						<label for="phone"><select title="号码区号" name="district" id="district">
								<option value="中国 0086">中国 0086</option>
								<option value="美国 001">美国 001</option>
								<option value="法国 0033">法国 0033</option>
								<option value="澳大利亚 0061">澳大利亚 0061</option>
							</select></label>
						<input type="text" id="phone" name="phone" placeholder="建议使用常用手机">
					</div>
					<span class="notice"></span>
				</div>
				<div class="container">
					<div class="input">
						<label for="securityCode">验证码</label>
						<input type="text" id="securityCode" name="securityCode" placeholder="请输入验证码">
						<span id="securityCodeText"></span>
					</div>
					<span class="notice"></span>
				</div>
				<div class="v">
					<div class="root">
						<input type="checkbox">阅读并同意
						<a href="#">《用户注册协议》</a>
						<a href="#">《隐私政策》</a>
					</div>
				</div>
				<div class="input submit">
					<input type="submit" id="submit" value="注册">
				</div>
			</form>
		</div>
	</body>
</html>
